<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			body {
				background-color: #ececec;
			}

			a {
				color: #333;
				text-decoration: none;
			}

			li {
				list-style: none;
			}

			.shoujimokuai {
				width: 1227px;
				height: 613px;
				margin: 20px auto;
			}

			.shoujimokuai .left {
				width: 234px;
				height: 613px;
				background-color: hotpink;
				float: left;
			}

			.left:hover {
				box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
			}

			.phone li {
				width: 236px;
				height: 300px;
				text-align: center;
				background-color: #fff;
				float: left;
				margin-left: 12px;
				margin-bottom:13px;
			}

			/* .secondphone {



				margin-top: 13px;
			} */

			.phone li:hover {
				box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
			}

			.phone img {
				width: 80%;
			}

			.name {
				color: #333;
				height: 21px;
				font-size: 14px;
				font-weight: 400;
				text-align: center;

			}

			.peizhi {
				color: #B0B0B0;
				font-size: 12px;
				text-align: center;
				margin: 2px 10px 10px;
			}

			.price {
				color: #FF6700;
				font-size: 14px;
				text-align: center;
				margin: 0 10px 14px;
			}

			.price span {
				color: #B0B0B0;
				text-decoration: line-through;
				margin: 0 0 0 7px;
			}
		</style>
	</head>
	<body>
		<div class="shoujimokuai">
			<div class="left">
				<img src="../images/mixfold.jpg">
			</div>
			<ul class="phone">
				<li>
					<div><img src="../images/phone1.jpg" alt=""></div>

					<h3 class="name">小米11 Pro</h3>
					<h3 class="peizhi">1/1.12''GN2｜骁龙888</h3>
					<p class="price">4499元起 </p>
				</li>
				<li>
					<div><img src="../images/phone2.jpg" alt=""></div>

					<h3 class="name"><a href="">小米11 青春版</a></h3>
					<h3 class="peizhi">小米11 青春版 轻薄</h3>
					<p class="price">2099元起 <span>2299元</span></p>
				</li>
				<li>
					<div><img src="../images/phone3.jpg" alt=""></div>
					<h3 class="name">小米11 Pro</h3>
					<h3 class="peizhi">1/1.12''GN2｜骁龙888</h3>
					<p class="price">4499元起
				</li>
				<li>
					<div><img src="../images/phone4.jpg" alt=""></div>
					<h3 class="name">小米11 Pro</h3>
					<h3 class="peizhi">1/1.12''GN2｜骁龙888</h3>
					<p class="price">4499元起
				</li>
				<li >
					<div><img src="../images/phone5.jpg" alt=""></div>

					<h3 class="name">小米11 Pro</h3>
					<h3 class="peizhi">1/1.12''GN2｜骁龙888</h3>
					<p class="price">4499元起 <span>4499元</span>
				</li>
				<li >
					<div><img src="../images/phone6.jpg" alt=""></div>

					<h3 class="name">小米11 Pro</h3>
					<h3 class="peizhi">1/1.12''GN2｜骁龙888</h3>
					<p class="price">4499元起 <span>4499元</span>
				</li>
				<li >
					<div><img src="../images/phone7.jpg" alt=""></div>

					<h3 class="name">小米11 Pro</h3>
					<h3 class="peizhi">1/1.12''GN2｜骁龙888</h3>
					<p class="price">4499元起 <span>4499元</span>
				</li>
				<li >
					<div><img src="../images/phone8.jpg" alt=""></div>
					<h3 class="name">小米11 Pro</h3>
					<h3 class="peizhi">1/1.12''GN2｜骁龙888</h3>
					<p class="price">4499元起
				</li>
			</ul>

		</div>

	</body>
</html>
